<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    v-loading="loading"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('1000px')"
    :visible="visible"
    :title="title"
    :append-to-body="true"
    class="segment-dialog"
    @open="open"
    @close="close"
  >
    <NullData v-if="segmentList.length === 0" :title="$t('CABLE_HAS_NO_SEGMENT')" />
    <div v-for="item in segmentList" :key="item.segmengId" class="dialog-detail">
      <!-- 网段基本信息 -->
      <div class="flex flex-wrap">
        <div class="w-100 flex align-center">
          <span class="title-label">{{ $t('SEGMENT_NAME') }}:</span>
          {{ item.segmentName }}
        </div>
        <!-- <div class="w-50">
          <span class="title-label">{{ $t('CABLE_NAME') }}:</span>
          {{ item.cable ? item.cable.cableName : '--' }}
        </div> -->
        <div class="w-50">
          <span class="title-label">{{ $t('A_END_REGIONAL_STATION_NAME') }}:</span>
          {{ getRegionName(item.startStationId) }}
        </div>
        <div class="w-50">
          <span class="title-label">{{ $t('Z_END_REGIONAL_STATION_NAME') }}:</span>
          {{ getRegionName(item.endStationId) }}
        </div>
        <div class="w-50">
          <span class="title-label">{{ $t('A_END_ROOM_NAME') }}:</span>
          <span> {{ getRoomName(item.startNode.roomId) }}</span>
        </div>
        <div class="w-50">
          <span class="title-label">{{ $t('Z_END_ROOM_NAME') }}:</span>
          <span> {{ getRoomName(item.endNode.roomId) }}</span>
        </div>
        <div class="w-50">
          <span class="title-label">{{ $t('ANODE') }}:</span>
          {{ item.startNode.nodeName }}
        </div>
        <div class="w-50">
          <span class="title-label">{{ $t('ZNODE') }}:</span>
          {{ item.endNode.nodeName }}
        </div>
      </div>
      <el-table
        ref="channelTable"
        :data="item.segmentChannelList"
        size="mini"
        height="100%"
        border
        align="center"
      >
        <template slot="empty">
          <NullData />
        </template>
        <el-table-column type="index" :label="$t('SEQUENCE')" :width="resetSize(60)" />
        <!-- 通道状态 -->
        <el-table-column :label="$t('CHANNEL_STATUS')">
          <template v-slot="scope">
            {{ dictMap.CHANNEL_STATUS[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('LINK_LOSS')" width="110" prop="loss">
          <template v-slot="scope">
            {{
              scope.row.linkLoss > 990000
                ? '--'
                : changeDecimal(scope.row.linkLoss, 3)
            }}
          </template>
        </el-table-column>
        <!-- A端节点信息 -->
        <el-table-column :label="item.startNode.nodeName" :render-header="tableRenderHeader">
          <el-table-column
            v-if="
              item.startNode.nodeCategory !== 'LIGHT_SPLIT' &&
                item.startNodeCategory !== 'TRANSPORT'
            "
            :label="$t('A_EEND_PORT')"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              {{
                $utils.handleServiceI18n(
                  scope.row.startPort ? scope.row.startPort.connPortName : '--'
                )
              }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('Z_EEND_PORT')" show-overflow-tooltip prop="startPort">
            <template v-slot="scope">
              {{ $utils.handleServiceI18n(scope.row.startPort ? scope.row.startPort.bizName : '--') }}
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 光缆信息 -->
        <el-table-column
          v-if="item.cableId"
          :label="item.cable.cableName"
          :render-header="tableRenderHeader"
        >
          <el-table-column :label="$t('FIBER_CORE')" show-overflow-tooltip prop="fiber">
            <template v-slot="scope">
              {{ scope.row.fiber ? scope.row.fiber.fiberName : '--' }}
            </template>
          </el-table-column>
        </el-table-column>
        <!-- Z端节点信息 -->
        <el-table-column :label="item.endNode.nodeName" :render-header="tableRenderHeader">
          <el-table-column :label="$t('A_EEND_PORT')" show-overflow-tooltip prop="endPort">
            <template v-slot="scope">
              {{ $utils.handleServiceI18n(scope.row.endPort ? scope.row.endPort.bizName : '--') }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.endNodeCategory !== 'LIGHT_SPLIT' && item.endNodeCategory !== 'TRANSPORT'"
            :label="$t('Z_EEND_PORT')"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              {{
                $utils.handleServiceI18n(scope.row.endPort ? scope.row.endPort.connPortName : '--')
              }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CLOSE') }}</el-button>
    </template>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import networkSegmentApi from '@/api/oen/NetworkSegmentApi'
  import { changeDecimal, tableRenderHeader, getParentsById } from '@/utils/common'

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      currentEdge: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        loading: false,
        changeDecimal: changeDecimal,
        segmentList: [],
        title: ''
      }
    },
    computed: {
      ...mapGetters(['baseRegionList', 'dictMap', 'stationTree'])
    },
    methods: {
      open() {
        this.title = this.$t('CABLE_NAME') + '：' + this.currentEdge.label
        console.log('open', this.currentEdge)
        this.loading = true
        networkSegmentApi
          .getByCableId({ cableId: this.currentEdge.id })
          .then(res => {
            this.segmentList = res || []
          })
          .finally(e => {
            this.loading = false
          })
      },
      tableRenderHeader(h, data) {
        return tableRenderHeader(h, data)
      },
      // 获取区域/站点
      getRegionName(regionId) {
        const parents = getParentsById(this.stationTree, regionId, 'regionId') || []
        return parents
          .reverse()
          .map(i => i.regionName)
          .join('/')
      },
      getRoomName(roomId) {
        const stationData = this.baseRegionList.find(i => i.regionId === roomId)
        return stationData ? stationData.regionName : ''
      },
      close() {
        this.$emit('close', false)
      }
    }
  }
</script>
